{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.w-200px{width: 200px;}
	#container{line-height: 1;width: 800px;}
	pre{overflow: visible;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

		  <el-form-item label="接收者" prop="email">
		    <el-input v-model="form.email" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Email"></el-input>
		  </el-form-item>

		  <el-form-item label="标题" prop="title">
		    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title" maxlength="50" show-word-limit></el-input>
		  </el-form-item>

		  <el-form-item label="内容" class="line-height-inherit" prop="content">
			<script id="container" type="text/plain"></script>
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">发送</el-button>
		    <el-button @click="resetForm('form')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</div>
{/block}
{block name="script"}
{js href="/static/plugin/Ueditor/ueditor.config.js" /}
{js href="/static/plugin/Ueditor/ueditor.all.min.js" /}
{js href="/static/plugin/Ueditor/lang/zh-cn/zh-cn.js" /}
<script type="text/javascript">
	var ue = UE.getEditor('container');
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			form:{
				{notempty name=":request()->get('email')"}
				email:'{:request()->get('email')}',
				{else/}
				email:'',
				{/notempty}
				title:'',
				content:'',
			},
	        rules: {
	          email: [
	            { required: true, message: '请输入接收者', trigger: 'blur' },
	          ],
	          title: [
	            { required: true, message: '请输入标题', trigger: 'blur' },
	          ],
	          content: [
	            { required: true, message: '请输入消息内容', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				    D.content=ue.getContent();
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'/sendEmail',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									_this.resetForm(formName);
									ue.execCommand('cleardoc');
									ue.execCommand('clearlocaldata');
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}